<script setup lang="ts">

// 1. 方式一：定义一个属性，接收父组件传过来的属性
// let props = defineProps(['money', 'books'])

// 1. 方式二：完整定义的方式，拥有更多的定制性，可以拥有默认值
let props = defineProps({
  money: {
    type: Number,
    required: true,
    default: 200
  },
  books: Array
})

function buy(){
  // 只读的属性，不能修改，当前页面也不会生效
  props.money -= 5
}
</script>

<template>
  <div style="background-color: #646cff; color: white">
    <h3>Son</h3>
    <button @click="buy">买棒棒糖</button>
    <div>账户：{{props.money}}</div>
    <div>图书：
      <li v-for="b in props.books">{{b}}</li>

    </div>
  </div>
</template>

<style scoped>

</style>